<template>
  <div>
    <div v-if="plan">
      <!-- 返回 -->
      <NavBarBack></NavBarBack>
      <!-- 收获地址的详情 -->
      <div>xxx收货</div>
      <!-- 产品的基本信息 -->
      <div>产品图片，名称信息，数量等</div>
    </div>
    <div v-else>
      <!-- 弹出式的输入支付密码面板 -->
      <van-password-input
        :value="value"
        info="密码为 6 位数字"
        :focused="showKeyboard"
        @focus="showKeyboard = true"
      />
      <!-- 数字键盘 -->
      <van-number-keyboard
        :show="showKeyboard"
        @input="onInput"
        @delete="onDelete"
        @blur="showKeyboard = false"
        style="bottom: 80px;"
      />
      <button @click="res">返回</button>
    </div>
    <!-- 提交订单 -->
    <van-submit-bar :price="3050" button-text="提交订单" @submit="onSubmit" />
  </div>
</template>
<script>
import NavBarBack from "../../components/navBarBack";
export default {
  data() {
    return {
      plan: true,
      value: "",
      showKeyboard: true
    };
  },
  name: "sumbitBarBox",
  methods: {
    onSubmit() {
      alert("提交订单");
      this.plan = false;
    },
    onInput(key) {
      this.value = (this.value + key).slice(0, 6);
    },
    onDelete() {
      this.value = this.value.slice(0, this.value.length - 1);
    },
    res() {
      this.plan = true;
    }
  },
  components: {
    NavBarBack
  }
};
</script>
<style></style>
